<template>
    <div>
       <div class="content">
           <div class="content-top">
               <el-row :gutter="10">
                   <el-col :xs="12" :sm="12" :md="3">
                        <el-select v-model="value" placeholder="游戏名称">
                            <el-option key='0' label="游戏名称" value="0"></el-option>
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="6">
                         <el-date-picker
                            v-model="date"
                            type="daterange" 
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :xs="2" :sm="2" :md="1">
                         <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                    </el-col>
               </el-row>
               <el-row :gutter="10" class="btns">
                   <el-button @click="deleteService">批量删除开服</el-button>
                   <el-button>批量导入开服</el-button>
                   <el-button>导出</el-button>
                   <el-button>新增开服</el-button>
               </el-row>
           </div>
           <div class="table">
               <el-table
                    ref="multipleTable"
                    :data="tableArray"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    @selection-change="handleSelectionChange"
                   >
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="游戏名称"
                   >
                    </el-table-column>
                    <el-table-column
                    prop="date"
                    label="开服时间"
                   >
                    </el-table-column>
                    <el-table-column
                    prop="area"
                    label="区服ID/区服名称"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    show-overflow-tooltip>
                      <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
           </div>
       </div>
    </div>
</template>

<script>
    export default {
        name:'pageContent',
        data(){
            return{
                gameName:'',
                value:'',
                date:'',
                tableArray:[],
                options: [{
                    value: '001',
                    label: 'B游汇'
                    }, {
                    value: '002',
                    label: '大话儒道'
                    }, {
                    value: '003',
                    label: '梦幻三国'
                    }, {
                    value: '004',
                    label: '口袋火影'
                    }, {
                    value: '005',
                    label: '大话三国'
                },{
                    value: '006',
                    label: '美女大作战'
                },{
                    value: '007',
                    label: '数码宝贝'
                }],
                tableData: [{
                date: '2018-06-03',
                name: 'B游汇',
                area: '1区',
                id:'001'
                }, {
                date: '2018-07-02',
                name: '大话儒道',
                area: '46区',
                id:'002'
                }, {
                date: '2018-07-30',
                name: '口袋火影',
                area: '30区',
                id:'003'
                }, {
                date: '2018-06-01',
                name: '大话三国',
                area: '215区',
                id:'004'
                }, {
                date: '2018-07-10',
                name: '美女大作战',
                area: '10区',
                id:'005'
                }, {
                date: '2018-07-24',
                name: '数码宝贝',
                area: '66区',
                id:'006'
                }, {
                date: '2018-07-07',
                name: '传奇挂机',
                area: '88区',
                id:'007'
                }],
                multipleSelection: []
            }
        },
        created(){
            this.tableArray=this.tableData;
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteService(){
                let arrayId=[];
                let Array=[];
                let deleteMessage=this.multipleSelection;
                this.$confirm('确认删除选中的开服表？')
                .then(_ => {
                    if(deleteMessage.length==0){
                        this.$message.error('请选择批量删除的数据！');
                        return;
                    }
                    deleteMessage.forEach(element => {
                        arrayId.push(element.id);
                    });
                    for(let i=0;i<arrayId.length;i++){
                        for(let j=0;j<this.multipleSelection.length;j++){
                            if(arrayId[i]==this.multipleSelection[j].id){
                                let i=this.tableArray.indexOf(this.multipleSelection[j]);
                                this.tableArray.splice(i,1);
                            }
                        }
                    }
                })
                .catch(_ => {});   
                
            },
            handleDelete(index){
                this.$confirm('确认删除此条开服表？')
                .then(_ => {
                     this.tableArray.splice(index,1);
                })
                .catch(_ => {});     
            },
            search(){
                let result=[];
                this.tableArray=this.tableData;
                if(!this.date){
                    return;
                }
                let starTime=this.date[0].getTime();
                let endTime=this.date[1].getTime();
                this.tableArray.forEach(e=>{
                    let tableDate=(new Date(e.date)).getTime();
                    if(starTime<=tableDate&&tableDate<=endTime){
                     result.push(e);
                    }
                })
                this.tableArray=result;   
            }
        }
    }
</script>

<style scoped lang="scss">
    .content{
        .content-top{
            .search{
                line-height:40px;
                cursor:pointer;
                padding:0 20px;
            }
            .btns{
                text-align:right;
            }
        }
        .table{
            margin-top:20px;
        }
    }
</style>